import React, { useEffect, useState } from "react";
import { Search, Tag } from "react-vant";
import { DeleteO } from "@react-vant/icons";
const Index: React.FC = () => {
  const [searchList, setSearchList] = useState<string[]>(
    JSON.parse(localStorage.getItem("searchList") || "[]")
  );

  const handleSearch = (value: string) => {
    setSearchList([...new Set([value, ...searchList])]);
  };

  useEffect(() => {
    localStorage.setItem("searchList", JSON.stringify(searchList));
  }, [searchList]);

  return (
    <div>
      <Search onSearch={(value) => handleSearch(value)}></Search>

      <div className="content" style={{ padding: 10 }}>
        {searchList.length !== 0 ? (
          <div>
            <h4
              style={{
                display: "flex",
                justifyContent: "space-between",
                alignItems: "center",
              }}
            >
              <span>历史记录</span>
              <DeleteO onClick={() => setSearchList([])} />
            </h4>
            {searchList.map((v, i) => {
              return (
                <Tag type="primary" style={{ padding: 6, margin: 6 }} key={i}>
                  {v}
                </Tag>
              );
            })}
          </div>
        ) : (
          <h4>暂无搜索记录</h4>
        )}
      </div>
    </div>
  );
};

export default Index;
